<template>
  <PageWrapper>
    <div id="notice">
      <a-card>
        <div id="profile">
          <h2>合作须知</h2>
          <div class="detail">
            <div ref="edit" class="textarea" contenteditable="true"></div>
          </div>
          <div class="company">汕头市澄海区绿云科技有限公司</div>
        </div>
        <a-row class="mt-4">
          <a-col :span="8" :offset="16" style="text-align: right">
            <a-space>
              <!-- <a-button @click="getHtml">修改</a-button> -->
              <a-button type="primary" ghost @click="getHtml">保存</a-button>
              <!-- <a-button type="primary" @click="getHtml">发送</a-button> -->
            </a-space>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'
import { message, Modal } from 'ant-design-vue'
import { article } from '/@/api/sys/common'
import { addArticle } from '/@/api/sys/admin'
import { ref, onMounted } from 'vue'
const token = localStorage.getItem('TOKEN_KEY')
const edit = ref(null)
async function getArticle() {
  const res = await article({
    type: 'interact',
  })
  edit.value.innerHTML = JSON.parse(res.data.content)
  // edit.value=JSON.parse(res.data.content)
}
async function getHtml() {

  if (edit.value && edit.value.innerHTML) {
    const res = await addArticle({
      token,
      data: {
        type: 'interact',
        content: JSON.stringify(edit.value.innerHTML),
      },
    })
    if (res.success === 1) {
      message.success('成功')
      getArticle()
    } else {
      message.error(res.message)
    }

  } else {
    Modal.error({
      title: '错误提示',
      content: '简介不能为空',
    })
  }
}
// 页面加载时自动执行
onMounted(() => {
  getArticle()
})
</script>
<style scoped lang="less">
#profile {
  width: 800px;
  margin: auto;
  background-color: #fff;
  border: 1px solid #010101;
  padding: 53px 59px 70px;
  line-height: 27px;
  font-size: 18px;
  color: #000000;
  position: relative;

  h2 {
    color: #4588c0;
    text-align: center;
    font-size: 28px;
  }

  .detail {
    background: url(../../../assets/images/bg3.png) repeat;
    line-height: 47px;

    .textarea {
      border: 0;
      outline: none;
      resize: none;
      width: 100%;
      min-height: 768px;
      background: none;
      line-height: 48px;
      font-size: 18px;
    }
  }

  .company {
    position: absolute;
    bottom: 20px;
    left: -2px;
    width: 100%;
    text-align: center;
  }
}
</style>
